<template>
	<u-navbar :placeholder="placeholder" :bgColor="bgColor" title=" ">
		<view class="flex col-center" slot="left" @click="goBack">
			<text class="iconfont icon-back fz-42 mr-10" :style="{color: titleColor}" v-show="showBack"/>
			<slot name="left">
				<view class="logo" v-if="showLogo"><image src="@/static/images/logo.png"></image></view>
			</slot>
		</view>
		<view slot="center" class="center fz-32" :style="{color: titleColor}"><slot name="center">{{title}}</slot></view>
		<view slot="right"></view>
	</u-navbar>
</template>

<script>
	export default {
		name:"navbar",
		options: { styleIsolation: 'shared' },
		props: {
			bgColor: {
				type: String,
				default: '#000'
			},
			title: {
				type: String,
				default: ''
			},
			showBack: {
				type: Boolean,
				default: true
			},
      showLogo: {
        type: Boolean,
        default: false
      },
			back: {
				type: [String, Boolean],
				default: ''
			},
			placeholder: {
				type: Boolean,
				default: true
			},
			customClass: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goBack() {
				if (typeof this.back == 'boolean') {
					this.$emit('back')
				} else if (!this.back) {
          const pages = getCurrentPages()
          if (pages.length >= 2) {
            uni.navigateBack()
          } else {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
				} else {
          uni.navigateTo({
            url: this.back
          })
        }
			}
		},
	}
</script>

<style lang="scss" scoped>
@import "@/static/styles/minix.scss";
.logo {
	width: 56rpx;
	height: 56rpx;
	border-radius: 100%;
	overflow: hidden;
	background-color: #fff;
	padding: 5rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.center {
  max-width: 50%;
  @include overLine()
}
</style>